<template>
  <div class="search-city">
    <div class="search-input">
      <input
        type="text"
        placeholder="请输入城市名称"
        v-model="inputCity"
        @input="handleInput"
        @keydown.enter="handleEnter"
      />
      <div
        class="city-box font-white"
        :style="{ height: cityBoxHeight + 'px' }"
        ref="cityBox"
      >
        <div style="padding: 10px">
          <div v-if="resData">
            <div
              v-for="city in resData"
              @click="searchWeather(city.adcode, city.city)"
            >
              {{ city.city }}
            </div>
          </div>
          <p v-else>似乎没有查找到您要搜索的城市信息</p>
        </div>
      </div>
    </div>
    <div>
      <div
        v-if="CityListStore.cityList.length > 0"
        class="city-list font-white"
      >
        <div
          v-for="city in CityListStore.cityList"
          :key="city.adcode"
          class="city-item"
        >
          <div class="city-item-data">
            <span>{{ city.name }}</span>
            <span>{{ city.weather.temperature }}°C</span>
          </div>
          <div class="city-item-btn">
            <button
              class="btn font-white"
              @click="searchWeather(city.adcode, city.name)"
            >
              查看
            </button>
            <button class="btn font-white" @click="deleteCity(city.adcode)">
              删除
            </button>
          </div>
        </div>
      </div>
      <div v-else class="no-city font-white">
        暂时没有保存过城市天气信息,请查询后点击左上角"+"号保存
      </div>
    </div>
  </div>
</template>

<script setup>
// 导入城市列表存储库
import { useCityListStore } from "@/stores/CityList";
// 导入Vue的nextTick和ref函数
import { nextTick, ref } from "vue";
// 导入获取地理位置的API
import { getGeo } from "@/apis/place";
// 导入Vue Router的useRouter函数
import { useRouter } from "vue-router";

const CityListStore = useCityListStore();
const cityBoxHeight = ref(0);
const cityBox = ref(null);
const inputCity = ref("");
const resData = ref("");
// 处理输入事件的函数
const handleInput = () => {
  handleInputDebounce();
};
// 监听文档点击事件，隐藏城市列表框
document.addEventListener("click", (e) => {
  if (!cityBox.value.contains(e.target)) {
    cityBoxHeight.value = 0;
  } else {
    return;
  }
});
const router = useRouter();
// 搜索天气信息的函数
const searchWeather = (adcode, city) => {
  console.log(adcode);
  CityListStore.setShowCity(city, adcode);
  router.push({ name: "about", params: { adcode } });
};
// 删除城市信息的函数
const deleteCity = (adcode) => {
  CityListStore.removeCityList(adcode);
};
// 防抖函数
function debounce(func, wait) {
  let timeout;
  return function () {
    const context = this;
    const args = arguments;
    clearTimeout(timeout);
    timeout = setTimeout(() => {
      func.apply(context, args);
    }, wait);
  };
}
// 处理输入防抖的函数
const handleInputDebounce = debounce(async () => {
  await nextTick(); //等待组件更新完成
  cityBoxHeight.value = cityBox.value.scrollHeight;
  getGeo(inputCity.value).then((res) => {
    //console.log(res.data)
    resData.value = res.data.geocodes;
  });
}, 1000);

// 处理回车搜索的函数
const handleEnter = () => {
  if (resData.value && resData.value.length > 0) {
    const firstCity = resData.value[0];
    searchWeather(firstCity.adcode, firstCity.city);
    cityBoxHeight.value = 0;
  }
};
</script>
<style lang="scss" scoped>
.search-city {
  margin-top: 20px;

  .search-input {
    input {
      width: 100%;
      height: 40px;
      padding: 0 10px;
      border: none;
      outline: none;
      background-color: transparent;
      color: #fff;
      border-bottom: 2px solid #eee;
      font-size: 16px;
      font-weight: 500;
      transition: all 0.3s ease;
      box-sizing: border-box;

      &:focus {
        box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
        border: none;
      }

      &::-webkit-input-placeholder {
        /* WebKit browsers */
        color: #999;
      }
    }

    .city-box {
      margin-top: 5px;
      width: 100%;
      font-size: 16px;
      //padding: 10px;
      transition: all 0.5s ease;
      cursor: pointer;
      background-color: rgb(0, 78, 113);
      border-radius: 5px;
      box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
      box-sizing: border-box;
      overflow: hidden;
    }
  }
}

.city-list {
  margin-top: 20px;

  .city-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-top: 5px;
    //transition: all 0.5s ease;

    .city-item-data {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      padding: 10px;
      transition: all 0.5s ease;
      cursor: pointer;
      background-color: rgb(0, 78, 113);
      border-radius: 5px;
      box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);

      span {
        display: block;
        font-size: 16px;
        font-weight: 500;
        margin: 0 20px;
      }
    }

    .city-item-btn {
      display: none;
      transition: all 0.5s ease;

      .btn {
        width: 60px;
        height: 36px;
        font-size: 16px;
        line-height: 36px;
        text-align: center;
        margin: 0 5px;
        border: none;
        box-shadow: none;
        background-color: orange;

        &:hover {
          background-color: #ff8c00;
        }
      }
    }

    &:hover {
      .city-item-data {
        width: 80%;
      }
      .city-item-btn {
        display: flex;
      }
    }
  }
}

.no-city {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
  width: 100%;
  font-size: 16px;
  padding: 10px;
  transition: all 0.5s ease;
  cursor: pointer;
  background-color: rgb(0, 78, 113);
  border-radius: 5px;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
}
</style>
